<template>
	<div class="system-systemUserdmin-dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="1000px">

			<el-card shadow="hover">
				<el-form :model="state.ruleForm" ref="datainterfaceDialogFormRef" :rules="rules" size="default"
					label-width="120px">
					<el-row :gutter="35">

						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="配置编码" prop="configCode">
								<el-input v-model="state.ruleForm.configCode" :disabled.sync="state.dialog.type === 'edit'"
									placeholder="配置编码" clearable></el-input>
							</el-form-item>
						</el-col>

						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="配置名称" prop="configName">
								<el-input v-model="state.ruleForm.configName" :disabled.sync="state.dialog.type === 'edit'"
									placeholder="配置名称" clearable></el-input>
							</el-form-item>
						</el-col>

						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="值" prop="configValue">
								<el-input v-model="state.ruleForm.configValue" placeholder="值" clearable></el-input>
							</el-form-item>
						</el-col>

						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="拓展字段1" prop="expand1">
								<el-input v-model="state.ruleForm.expand1" placeholder="拓展字段1" clearable></el-input>
							</el-form-item>
						</el-col>

						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="拓展字段2" prop="expand2">
								<el-input v-model="state.ruleForm.expand2" placeholder="拓展字段2" clearable></el-input>
							</el-form-item>
						</el-col>

						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="拓展字段3" prop="expand3">
								<el-input v-model="state.ruleForm.expand3" placeholder="拓展字段3" clearable></el-input>
							</el-form-item>
						</el-col>

						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
							<el-form-item label="谷歌验证码" prop="code">
								<el-input v-model="state.ruleForm.code" placeholder="谷歌验证码" clearable></el-input>
							</el-form-item>
						</el-col>







					</el-row>
				</el-form>


			</el-card>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
			</template>
		</el-dialog>

	</div>
</template>

<script setup lang="ts" name="systemDicDialog">
import { ElMessage } from 'element-plus';
import { reactive, ref, watch } from 'vue';


// 导入接口
import { useCommonApi } from '/@/api/common/index';


const datainterfaceDialogFormRef = ref();


// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);


const rules = {
	code: [{
		required: true,
		message: "不能为空，请重新输入！",
		trigger: "blur"
	}],
	configValue: [
		{
			required: true,
			message: "不能为空，请重新输入！",
			trigger: "blur"
		}
	]
}


const state = reactive({
	// 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
	id: "",
	ruleForm: {
		configCode: "",
		configName: "",
		configValue: "",
		expand1: "",
		expand2: "",
		expand3: "",
		code: ""
	} as any,
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
});






// 打开弹窗
const openDialog = async (type: string, row?: any) => {
	if (type === 'edit') {
		console.log(row)

		state.id = row.id;

		state.ruleForm = {
			configCode: row.configCode,
			configName: row.configName,
			configValue: row.configValue,
			expand1: row.expand1,
			expand2: row.expand2,
			expand3: row.expand3,
			code: ""
		}

		state.dialog.title = '修改配置参数';
		state.dialog.submitTxt = '修 改';
	}
	state.dialog.type = type;
	state.dialog.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};


// 取消
const onCancel = () => {
	closeDialog();
};
// 提交
const onSubmit = () => {



	// 检查顶层表单
	datainterfaceDialogFormRef.value.validate(async (valid: any) => {
		if (valid) {
			//检查参数列表

			try {
				if (state.dialog.type == 'edit') {
					let vo = Object.assign({}, {}, state.ruleForm);
					vo["id"] = state.id;
					await useCommonApi().updateParamConfig(vo, state.ruleForm.code);
				}
				ElMessage.success("操作成功");
				closeDialog(); // 关闭弹窗
				emit('refresh');
			} catch (error: any) {
				ElMessage.error(error.msg);
			}




		} else {
			ElMessage.warning("请检查数据的正确性！");
		}
	})



};





watch(
	() => state.dialog.isShowDialog,
	(newValue) => {
		if (newValue == true) {

		}
	}, { immediate: true }
);




// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style lang="scss">
.el-select {
	width: 100% !important;
}



.system-systemUserdmin-dialog-container {
	.bar_tools {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.el-table__expanded-cell {
		padding: 20px;
	}


	.alig_container {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;

		&>div {
			margin: 15px 0px;
			display: flex;
			justify-content: center;
		}
	}
}
</style>